<template>
  <div>
    <van-dropdown-menu v-if="windows===1 ">
      <van-dropdown-item v-model="value1" :options="option1"  @change="onSelectValue"/>
    </van-dropdown-menu>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="onSelectValue" v-if="windows===0">
  <el-menu-item index="1" @click="value1=0">全部学生</el-menu-item>
  <el-menu-item index="2" @click="value1=1">已答辩学生</el-menu-item>
  <el-menu-item index="3" @click="value1=2">未答辩学生</el-menu-item>
  <el-menu-item index="4" @click="value1=3">已评分成员</el-menu-item>
  <el-menu-item index="5" @click="value1=4">未评分成员</el-menu-item>
</el-menu>

    <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
<van-collapse v-model="activeName" accordion>

<div v-for='(item, index) in list' :key="index">
  <van-collapse-item :title="item.name" :name="item.id" v-if="value1===1&&item.state===2">
  <template #right-icon>
    <van-icon name="passed" size="20" color="#07c160" v-show="item.state === 2"/>
    <van-icon name="clock-o" size="20" color="#999" v-show="item.state === 0 || null"/>
    <van-icon name="fire-o" size="20" color="red" v-show="item.state ===1"/>
    <van-icon name="el-icon-close" size="20" color="#999" v-show="item.state ===3"/>
  </template>
  <template #title >
      <!-- <span :class="{'blue-text': item.state === 0, 'red-text': item.state === 1}">{{ item.name }}</span>
      <span :class="{'blue-text': item.state === 0, 'red-text': item.state === 1}">{{ item.sum }}</span> -->
      <van-grid :column-num=item.pfbzs+2>
  <van-grid-item :text="String(item.dbrChname)"/>
  <van-grid-item v-for="(pfbzss, index999) in item.pfbzs" :key="index999" :text="String(item['pf'+(index999+1)])" />
  <van-grid-item :text="String(item.zf)" />
</van-grid>

    </template>
    <p v-for="(pfbzes, index2) in pfs[index] " :key="index2">{{ pfbz[index2] }}:{{ pfs[index][index2] }}</p>
</van-collapse-item>


  <van-collapse-item :title="item.name" :name="item.id" v-if="value1===2&&item.state===0">
  <template #right-icon>
    <van-icon name="passed" size="20" color="#07c160" v-show="item.state === 2"/>
    <van-icon name="el-icon-close" size="20" color="#999" v-show="item.state ===3"/>
  </template>
  <template #title>
      <!-- <span :class="{'blue-text': item.state === 0, 'red-text': item.state === 1}">{{ item.name }}</span>
      <span :class="{'blue-text': item.state === 0, 'red-text': item.state === 1}">{{ item.sum }}</span> -->
      <van-grid :column-num=item.pfbzs+2>
  <van-grid-item :text="String(item.dbrChname)" />
  <van-grid-item v-for="(pfbzss, index999) in item.pfbzs" :key="index999" :text="String(item['pf'+(index999+1)])" />
  <van-grid-item :text="String(item.zf)" />
</van-grid>

    </template>
    <p v-for="(pfbzes, index2) in pfs[index] " :key="index2">{{ pfbz[index2] }}:{{ pfs[index][index2] }}</p>
</van-collapse-item>



  <van-collapse-item :title="item.name" :name="item.id" v-if="value1===0">
  <template #right-icon>
    <van-icon name="passed" size="20" color="#07c160" v-show="item.state === 2"/>
    <van-icon name="clock-o" size="20" color="#999" v-show="item.state === 0"/>
    <van-icon name="fire-o" size="20" color="red" v-show="item.state != 0 && item.state !=2 && item.state !=3 "/>
    <van-icon name="el-icon-close" size="20" color="#999" v-show="item.state ===3"/>
  </template>
  <template #title>
      <!-- <span :class="{'blue-text': item.state === 0, 'red-text': item.state === 1}">{{ item.name }}</span>
      <span :class="{'blue-text': item.state === 0, 'red-text': item.state === 1}">{{ item.sum }}</span> -->
      <van-grid :column-num=item.pfbzs+2>
  <van-grid-item :text="String(item.dbrChname)" />
  <van-grid-item v-for="(pfbzss, index999) in item.pfbzs" :key="index999" :text="String(item['pf'+(index999+1)])" />
  <van-grid-item :text="String(item.zf)" />
</van-grid>

    </template>
    <p v-for="(pfbzes, index2) in pfs[index] " :key="index2">{{ pfbz[index2] }}:{{ pfs[index][index2] }}</p>
</van-collapse-item>

</div>


<div v-for='(item3, index3) in argumentes' :key="index3+100">
<!-- <van-collapse-item  :name="item3.pfr" v-if="value1===3"> -->
  <!-- <template #title> -->
      <van-grid :column-num=item3.pfbzs+2 v-if="value1===3">
  <van-grid-item :text="String(item3.chname)" />
  <van-grid-item v-for="(pfbzss, index999) in item3.pfbzs" :key="index999" :text="String(item3['pf'+(index999+1)])" />
  <van-grid-item :text="String(item3.zf)" />
</van-grid>



    <!-- </template> -->
    <!-- <p v-for="(pfbzes, index2) in pfs[index3] " :key="index2">{{ pfbz[index2] }}:{{ pfs[index][index2] }}</p> -->
<!-- </van-collapse-item> -->
</div>

<div v-for="(item4, index4) in unargumentes" :key="index4+1000" >
  <van-cell :title="unargumentes[index4].chname" v-if="value1===4" />
</div>
</van-collapse>

</van-list>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "ListPage",
  data() {
    return {
      activeIndex: "0",
      windows:0,
      value1: 0,
      option1: [
        { text: "全部学生", value: 0 },
        { text: "已答辩学生", value: 1 },
        { text: "未答辩学生", value: 2 },
        { text: "已评分学生", value: 3 },
        { text: "未评分学生", value: 4 },
      ],
      pfbz:["学号","姓名"],
      activeName: ['1'],
      fin:0,
      pfs:[
      ],
      lists:[],
      list: [{},],
      argumentes:[],
      unargumentes:[],
      loading: false,
      finished: false,
    };
  },
  mounted(){
    console.log(this.$store.state.dbrId);
    if(window.innerWidth<768){
      this.windows=1;
    }else{
      this.windows=0;
    }
    // console.log(this.windows);
    // console.log(this.$route.params.titlename);
    // console.log(this.$route.params.id);

    axios.post('/scores/showAll?classId='+this.$route.params.id)
     .then(res => {
      this.pfbz = this.pfbz.concat(this.$store.state.pfbzmsg);
      this.pfbz.push("总分");
      // console.log(this.pfbz);
      // console.log(res.data);
      this.list = res.data.data.data;
      this.pfs=res.data.data.pfbzes;
      // this.pfs
      console.log(this.pfs);
      console.log(res.data);
        // this.list = res.data.scores;
        // this.loading = false;
        // this.finished = true;
      })
     .catch(err => {
        console.log(err);
      });
  },
  methods: {
    onSelectValue(value) {
      console.log(value);
      if(value==="4"){
        axios.post('/scores/argument?id='+this.$store.state.dbrId)
         .then(res => {
            console.log(res.data);
            this.argumentes = res.data.data;
            console.log(this.argumentes[0].chname);
            console.log(this.argumentes[0].pfbzs);
            // this.pfs=res.data.data.pfbzes;
            // this.pfs
            // console.log(this.list);
          })
         .catch(err => {
            console.log(err);
          });
      }else if(value==="5"){
        axios.post('/scores/unargument?id='+this.$store.state.dbrId)
         .then(res => {
            this.unargumentes = res.data.data;
          })
         .catch(err => {
            console.log(err);
          });
      }
    },
    onLoad() {
  // 异步更新数据，setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 100; i++) {
      this.fin += 1;
    }

    // 加载状态结束
    this.loading = false;

    // 利用Vue的watch属性监视list数组的变化

      if (this.fin >= this.list.length) {
        this.finished = true;
        // 执行其他相关的代码
      }
  }, 1000);
},
  },
};
</script>

<style scoped>
.blue-text {  
  color: skyblue;  
}  
  
.red-text {  
  color: rgb(116, 193, 0);  
}


</style>